<template>
  <div class="validateAction" v-loading="loading">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row class="title">
      报单状态：{{ apply_status === 100 ? '申请中' : apply_status === 110 ? '入驻中' : apply_status === 120 ? '入驻成功' : apply_status === 200 ? '报名中': apply_status === 300 ? '报名成功' : apply_status === 400 ? '已成功' : apply_status === 500 ? '未通过' :'无' }} <span class="err" v-if="apply_status === 500">原因：{{ fail_reason }}</span>
      <el-button type="primary" size="mini" :loading="BlueJionLoading" v-if="apply_status === 300" @click="handleClickBlueJion">确定参加</el-button>
    </el-row>
    <h3>网商银行基础资料</h3>
    <el-row>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <el-form>
          <el-form-item label="商户类型："><span class="tip">{{ commer_type === 0 ? '自然人' : commer_type === 1 ? '个体工商户' : commer_type === 2 ? '企业商户' : '' }}</span></el-form-item>
          <el-form-item label="商户名称："><span>{{ commer_name }}</span></el-form-item>
          <el-form-item label="商户简称："><span>{{ alias }}</span></el-form-item>
          <el-form-item label="商户地址："><span>{{ commer_address.province + commer_address.city + commer_address.address }}</span></el-form-item>
          <el-form-item label="商户具体地址："><span>{{ real_address }}</span></el-form-item>
          <el-form-item label="联系人："><span>{{ contact_name }}</span></el-form-item>
          <el-form-item label="联系电话："><span>{{ contact_tel }}</span></el-form-item>
          <el-form-item label="商户客服电话："><span>{{ serverPhone }}</span></el-form-item>
          <el-form-item label="邮箱："><span>{{ email }}</span></el-form-item>
          <el-form-item label="负责人姓名："><span>{{ lead_name }}</span></el-form-item>
          <el-form-item label="负责人身份证号码："><span>{{ lead_identity_card }}</span></el-form-item>
          <el-form-item label="负责人手机号："><span>{{ lead_phone }}</span></el-form-item>
          <el-form-item label="营业执照号："><span>{{ business_license }}</span></el-form-item>
          <el-form-item label="商户经营类型："><span>{{ commer_mcc }}</span></el-form-item>
          <el-form-item label="支付宝名称："><span>{{ ali_nickname }}</span></el-form-item>
          <el-form-item label="支付宝账号："><span>{{ ali_account }}</span></el-form-item>
          <el-form-item label="信用代码："><span>{{ credit }}</span></el-form-item>
        </el-form>
        <h3>网商银行配置</h3>
        <el-form>
          <el-form-item label="选择渠道："><span>T1</span></el-form-item>
        </el-form>
        <h3>支付通道配置</h3>
        <el-form>
          <el-form-item label="网商微信通道-签约价："><span>{{ pay_config_rate.ws_wx_rate }}%</span></el-form-item>
          <el-form-item label="网商支付宝通道-签约价："><span>{{ pay_config_rate.ws_ali_rate }}%</span></el-form-item>
        </el-form>
        <h3>支付完成推荐微信公众号配置</h3>
        <el-form>
          <el-form-item label="支付微信公众号APPID："><span>{{ wxchat_config.pay_id }}</span></el-form-item>
          <el-form-item label="支付微信公众号SECRET："><span>{{ wxchat_config.app_secret }}</span></el-form-item>
          <el-form-item label="支付推荐关注公众号APPID："><span>{{ wxchat_config.recommend }}</span></el-form-item>
        </el-form>
      </el-col>
      <el-col :xl="12" :lg="12" :md="24" :sm="24" :xs="24">
        <el-form>
          <el-form-item label="账户类型："><span class="tip">{{ account_type === 0 ? '对私' : account_type === 1 ? '对公' : '' }}</span></el-form-item>
          <el-form-item label="银行账户名："><span>{{ card_name }}</span></el-form-item>
          <el-form-item label="银行卡号："><span>{{ bank_num }}</span></el-form-item>
          <el-form-item label="开户行名称："><span>{{ account_type === 1 ? bankno : account_type === 0 ? bank_type : ''}}</span></el-form-item>
          <el-form-item v-if="commer_type !== 2" label="开户行地址："><span>{{ bank_area.province + bank_area.city + bank_area.address }}</span></el-form-item>
          <el-form-item v-if="commer_type !== 2" label="支行名称："><span>{{ bank_branch_name }}</span></el-form-item>
          <el-form-item v-if="commer_type !== 2" label="证件号码："><span>{{ identify_card }}</span></el-form-item>
          <el-form-item v-if="commer_type !== 2" label="证件地址："><span>{{ identify_area }}</span></el-form-item>
          <el-form-item v-if="commer_type !== 2" label="手机号码："><span>{{ phone }}</span></el-form-item>
          <el-form-item label="个人信息照片："></el-form-item>
          <el-form-item>
            <img v-if="person_photo.positive" :src="person_photo.positive" alt="" title="身份证正面">
            <img v-if="person_photo.opposite" :src="person_photo.opposite" alt="" title="身份证反面">
            <img v-if="person_photo.handtive" :src="person_photo.handtive" alt="" title="手持身份证">
            <img v-if="person_photo.banktive" :src="person_photo.banktive" alt="" title="银行卡正面">
          </el-form-item>
          <el-form-item label="店铺信息："><span class="tip">（如营业执照为三证合一,可不上传组织机构证）</span></el-form-item>
          <el-form-item>
            <img v-if="store_photo.shop" :src="store_photo.shop" alt="" title="门头照片">
            <img v-if="store_photo.certificate" :src="store_photo.certificate" alt="" title="组织机构代码证">
            <img v-if="store_photo.permit" :src="store_photo.permit" alt="" title="开户许可证">
            <img v-if="store_photo.license" :src="store_photo.license" alt="" title="营业执照">
            <img v-if="store_photo.checkstand_pic" :src="store_photo.checkstand_pic" alt="" title="收银台照片">
            <img v-if="store_photo.indoor_pic" :src="store_photo.indoor_pic" alt="" title="店内环境照片">
            <img v-if="store_photo.settled_pic" :src="store_photo.settled_pic" alt="" title="入驻证明材料">
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-button type="danger" size="small" v-if="apply_status === 100 || apply_status === 500" @click="handleClickValidFiled">审核拒绝</el-button>
      <el-button v-if="apply_status === 100" type="primary" size="small" :loading="btnLoading" @click="handleClickWsSettle">确认入驻</el-button>
      <el-button v-if="apply_status === 110 || apply_status === 120" type="success" size="small" :loading="JionLoading" @click="handleClickBlueActionJion">确认报名</el-button>
    </el-row>
    <el-dialog :visible.sync="validCode" width="400px" title="验证手机号码">
      <el-form :model="Form" label-width="80px" ref="validSMS" :rules="rules">
        <el-form-item label="手机号码：">
          <el-input v-model="lead_phone" disabled readonly></el-input>
        </el-form-item>
        <el-form-item prop="verify_code" label="验证码：">
          <el-input placeholder="验证码" style="width:100px;" v-model="Form.verify_code"></el-input>
          <span>
            <el-button v-if="showing" type="warning" size="small" @click="sendMes">获取验证码</el-button>
            <el-button v-else type="warning" size="small" disabled>{{ this.count + 's后再次发送' }}</el-button>
          </span>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="handleClickValidCode" :loading="btnLoading">确认验证</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { verifyQuery, verifyQueryStatus, blueJionInit, blueJion, BlueStatus, BlueStatusChannel } from '@/api/action'
import { smsCodeValidate, handleWsSettle, validateWsImgUpload, handleWsSettleSearch } from '@/api/shop'

export default {
  name: 'validateAction',
  components: {
    Breadcrumb
  },
  data() {
    return {
      loading: true,
      validCode: false,
      btnLoading: false,
      btnOk: true,
      BlueJionLoading: false,
      showing: true,
      JionLoading: false,
      apply_status: null,
      rules: {
        verify_code: [{ required: true, trigger: 'blur', message: '必须填写哦~' }]
      },
      Form: {
        verify_code: ''
      },
      commer_name: '',
      commer_type: '',
      commer_address: '',
      real_address: '',
      legal_name: '',
      identify_card: '',
      contact_name: '',
      contact_tel: '',
      ali_nickname: '',
      ali_account: '',
      credit: '',
      account_type: '',
      card_name: '',
      bank_num: '',
      bank_type: '',
      bank_branch_name: '',
      bank_area: '',
      phone: '',
      serverPhone: '',
      person_photo: '',
      store_photo: '',
      email: '',
      pay_config_rate: '',
      lead_identity_card: '',
      lead_name: '',
      lead_phone: '',
      business_license: '',
      commer_mcc: '',
      wxchat_config: '',
      identify_area: '',
      bankno: '',
      alias: '',
      is_blue: '',
      status: '',
      channel_status: '',
      fail_reason: ''
    }
  },
  methods: {
    handleDocumentInit() {
      verifyQueryStatus(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.channel_status = res.data.result.channel_status
          this.fail_reason = res.data.result.error_info
          this.apply_status = res.data.result.apply_status
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      verifyQuery(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.$nextTick(() => {
            this.commer_name = res.data.result.commer_name
            this.commer_type = res.data.result.commer_type
            this.commer_address = res.data.result.commer_address
            this.real_address = res.data.result.real_address
            this.legal_name = res.data.result.legal_name
            this.identify_card = res.data.result.identify_card
            this.contact_name = res.data.result.contact_name
            this.contact_tel = res.data.result.contact_tel
            this.ali_nickname = res.data.result.ali_nickname
            this.ali_account = res.data.result.ali_account
            this.credit = res.data.result.credit
            this.account_type = res.data.result.account_type
            this.card_name = res.data.result.card_name
            this.bank_num = res.data.result.bank_num
            this.bank_type = res.data.result.bank_type
            this.bank_branch_name = res.data.result.bank_branch_name
            this.bank_area = res.data.result.bank_area
            this.phone = res.data.result.phone
            this.serverPhone = res.data.result.serverPhone
            this.person_photo = res.data.result.person_photo
            this.store_photo = res.data.result.store_photo
            this.email = res.data.result.email
            this.pay_config_rate = res.data.result.pay_config_rate
            this.lead_identity_card = res.data.result.lead_identity_card
            this.lead_name = res.data.result.lead_name
            this.lead_phone = res.data.result.lead_phone
            this.business_license = res.data.result.business_license
            this.commer_mcc = res.data.result.commer_mcc
            this.wxchat_config = res.data.result.wxchat_config
            this.identify_area = res.data.result.identify_area
            this.bankno = res.data.result.bankno
            this.alias = res.data.result.alias
            this.is_blue = res.data.result.is_blue
            this.status = res.data.result.status
            this.loading = false
          })
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleWsSettle() {
      this.btnLoading = true
      const arr = []
      arr.push({ type: '01', url: this.person_photo.positive })
      arr.push({ type: '02', url: this.person_photo.opposite })
      arr.push({ type: '07', url: this.person_photo.handtive })
      arr.push({ type: '07', url: this.person_photo.banktive })
      arr.push({ type: '06', url: this.store_photo.shop })
      arr.push({ type: '04', url: this.store_photo.certificate })
      arr.push({ type: '05', url: this.store_photo.permit })
      arr.push({ type: '03', url: this.store_photo.license })
      let i = 0
      const array = []
      const timer = setInterval(() => {
        validateWsImgUpload(arr[i].url, arr[i].type).then(response => {
          array.push({ certphoto: response.data.certphoto, type: response.data.type })
          if (array.length === arr.length) {
            handleWsSettle(this.$route.query.id, array, this.Form.verify_code).then(response => {
              if (response.data.errorCode === 0) {
                this.$message.success(response.data.errorMsg)
                this.btnLoading = false
                this.succ = true
                this.validCode = false
                BlueStatus(this.$route.query.id, 100, 110).then(response => {
                  if (response.data.errorCode === 0) {
                    this.$message.success(response.data.errorMsg)
                    this.apply_status = 110
                  } else {
                    this.$message.error(response.data.errorMsg)
                  }
                })
              } else {
                this.$message.error(response.data.errorMsg)
                this.btnLoading = false
              }
            })
          }
        }).catch((error) => {
          console.log(error)
        })
        i += 1
        if (i === arr.length) {
          clearInterval(timer)
        }
      }, 2000)
    },
    sendMes() {
      if (this.phone !== '' || this.phone !== undefined) {
        const TIME_COUNT = 120
        smsCodeValidate(this.lead_phone).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            if (!this.timer) {
              this.count = TIME_COUNT
              this.showing = false
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--
                } else {
                  this.showing = true
                  clearInterval(this.timer)
                  this.timer = null
                }
              }, 1000)
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      } else {
        this.$message.error('请填写手机号码')
      }
    },
    handleClickValidCode() {
      this.$refs['validSMS'].validate((valid) => {
        if (valid) {
          this.handleWsSettle()
        }
      })
    },
    handleClickWsSettle() {
      if (this.account_type === 0) {
        this.validCode = true
      } else {
        this.handleWsSettle()
      }
    },
    handleClickBlueActionJion() {
      this.JionLoading = true
      handleWsSettleSearch(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success('网商已入驻成功，正在为您报名活动...')
          BlueStatusChannel(this.$route.query.id, 3).then(res => {
            if (res.data.errorCode === 0) {
              BlueStatus(this.$route.query.id, 200, 120).then(response => {
                if (response.data.errorCode === 0) {
                  this.$message.success(response.data.errorMsg)
                  this.apply_status = 120
                  this.handleBlueSettle()
                  this.$message.success('正在提交报名材料，请稍等...')
                } else {
                  this.$message.error(response.data.errorMsg)
                  this.JionLoading = false
                }
              })
            } else {
              this.$message.error(res.data.errorMsg)
              this.JionLoading = false
            }
          })
        } else {
          this.$message.error(res.data.errorMsg)
          this.JionLoading = false
        }
      })
    },
    handleClickBlueJion() {
      this.BlueJionLoading = true
      blueJion(this.$route.query.id).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success(res.data.errorMsg)
          this.BlueJionLoading = false
          this.apply_status = 400
        } else {
          this.$message.error(res.data.errorMsg)
          this.BlueJionLoading = false
        }
      })
    },
    handleClickValidFiled() {
      BlueStatusChannel(this.$route.query.id, -1).then(res => {
        if (res.data.errorCode === 0) {
          this.$message.success(res.data.errorMsg)
          this.apply_status = 500
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    },
    handleBlueSettle() {
      const arr = []
      arr.push({ type: '10', url: this.store_photo.settled_pic })
      arr.push({ type: '09', url: this.store_photo.indoor_pic })
      arr.push({ type: '08', url: this.store_photo.checkstand_pic })
      arr.push({ type: '03', url: this.store_photo.license })
      arr.push({ type: '06', url: this.store_photo.shop })
      let i = 0
      const array = []
      const timer = setInterval(() => {
        validateWsImgUpload(arr[i].url, arr[i].type).then(response => {
          array.push({ certphoto: response.data.certphoto, type: response.data.type })
          if (array.length === arr.length) {
            blueJionInit(this.$route.query.id, array).then(res => {
              if (res.data.errorCode === 0) {
                this.$message.success(res.data.errorMsg)
                this.apply_status = 200
                this.JionLoading = false
                // BlueStatus(this.$route.query.id, 200, 200).then(response => {
                //   if (response.data.errorCode === 0) {
                //     this.$message.success(response.data.errorMsg)
                //   } else {
                //     this.$message.error(response.data.errorMsg)
                //   }
                // })
              } else {
                this.$message.error(res.data.errorMsg)
                this.JionLoading = false
                this.apply_status = 500
              }
            })
          }
        }).catch((error) => {
          console.log(error)
        })
        i += 1
        if (i === arr.length) {
          clearInterval(timer)
        }
      }, 2000)
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>

<style lang="scss" scoped>
  .validateAction {
    font-size: 12px;
    .title {
      padding-bottom: 10px;
      border-bottom: 1px solid #ddd;
    }
    span {
      font-size: 12px;
    }
    .el-form {
      padding-left: 15px;
    }
    img {
      width: 100px;
      height: 100px;
      margin-right: 5px;
    }
  }
</style>
